<template>
  <div
    ref="container"
    :style="{
      width: config.width,
      height: config.height,
      marginLeft: config.left,
      marginTop: config.top
    }"
  ></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ToyClaw } from '@/components/tools/index.js'
const container = ref(null)

let config = ref({
  width: '1920px',
  height: '1080px',
  left: '0px',
  right: '0px'
})

onMounted(() => {
  fetch('config.json')
    .then((response) => {
      if (!response.ok) {
        throw new Error('Network response was not ok')
      }
      return response.json()
    })
    .then((data) => {
      config.value = data
      setTimeout(() => {
        const toyClaw = new ToyClaw({
          el: container.value,
          ...config.value,
          onSuccess: (url) => {
            toyClaw.watchGame(url)
          }
        })
        toyClaw.init()
        document.onkeydown = (event) => {
          const key = event.key // 获取按下的键名
          switch (key) {
            case '+':
              // reduceRotation()
              break
            case '-':
              // addRotation()
              break
            case 'ArrowRight':
              moveRight()
              break
            case 'ArrowLeft':
              moveLeft()
              break
            case 'ArrowDown':
              moveDown()
              break
            case 'ArrowUp':
              // upBtn()
              break
          }
        }
        const moveLeft = () => {
          toyClaw.leftAction()
        }
        const moveRight = () => {
          toyClaw.rightAction()
        }
        const moveDown = () => {
          toyClaw.downAction()
        }
      }, 0)
    })
})
</script>

<style></style>
